<template>
	<div class="page">
		<Head navTitle="银行信息" />
		<div class="page-container ">
			<div class="bs-panel ht-panel rewt-panel">
				<div class="bs-panel-body">
					<div class="bs-form">
						<el-form ref="form" :model="form" label-position="top">
							<el-form-item label="开户地">
								<el-input readonly type="textarea" autosize placeholder="请输入内容" v-model="form.dizhi"></el-input>
								<div class="copy-link" :data-clipboard-text="form.dizhi" @click="copy">复制</div>
							</el-form-item>
							<el-form-item label="银行名称">
								<el-input readonly type="textarea" autosize placeholder="请输入内容" v-model="form.bankname">
								</el-input>
								<div class="copy-link" :data-clipboard-text="form.bankname" @click="copy">复制</div>
							</el-form-item>
							<el-form-item label="卡号">
								<el-input readonly v-model="form.knumbar" placeholder="请输入存款金额"></el-input>
								<div class="copy-link" :data-clipboard-text="form.knumbar" @click="copy">复制</div>
							</el-form-item>
							<el-form-item label="名字">
								<el-input readonly v-model="form.name" placeholder="请输入存款金额"></el-input>
								<div class="copy-link" :data-clipboard-text="form.name" @click="copy">复制</div>
							</el-form-item>
							<div class="el-form_ft text-center">
								<el-button type="info">取消</el-button>
								<el-button type="success" >确定</el-button>
							</div>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Clipboard from 'clipboard'
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				form: {
					dizhi: '这是开户地名称，可以两行展示',
					bankname: '这是开户地名称，可以两行展示',
					knumbar: '这是卡号',
					name: '这是名字',
				}
			};
		},
		methods: {
			copy() {
				var clipboard = new Clipboard('.copy-link')
				clipboard.on('success', e => {
					console.log(e)
					this.$message({
						message: '复制成功',
						center: true,
						type: 'success',
						duration: 800
					});
					clipboard.destroy()

				})
				clipboard.on('error', e => {
					// 不支持复制
					console.log(e)
					clipboard.destroy()
					// 释放内存
				})
			}
		}
	}
</script>
